<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">订单追踪</view>
		</cu-custom>
		<view>
			<block v-for="(item,index) in dataList" :key="index">
				<tui-collapse :index="index" :bdBgColor="bdBgColor" :current="item.current" :disabled="item.disabled" @click="change">
					<template v-slot:title>
						<tui-list-cell :hover="!item.disabled">
							<view style="width: 90%;">
								<view class="flex padding-xs justify-between text-bold">
									<view>工厂名称:华锦</view>
								</view>
								<view class="flex padding-xs justify-between">
									<view>订单编号:461651651</view>
									<view>产品:ds5616</view>
								</view>
								<view class="flex padding-xs justify-between">
									<view>合同日期:2020-04-15</view>
								</view>
							</view>
						</tui-list-cell>
					</template>
					<template v-slot:content>
						<view :class="[BackGroundBox,'flex mb-sm']" style="border-bottom: 2rpx dashed #888;">
							<view class="flex-treble">
								<image style="width: 100%;height: 100%;" src="/static/images/jp404.png" mode="aspectFill"></image>
							</view>
							<view class="flex-Nine">
								<view class="flex padding-m justify-between text-black text-bold">
									<view class="padding-m radius">颜色</view>
									<view class="padding-m radius">印染</view>
								</view>
								<view class="flex padding-m justify-between text-black text-bold">
									<view class="padding-m radius">加工商</view>
								</view>
								<view class="flex padding-m justify-between text-black text-bold">
									<view class="padding-m radius">数量:5000</view>
									<view class="padding-m radius">完工率:95%</view>
								</view>
							</view>
						</view>
						<view class="flex  p-xs margin-bottom-sm mb-sm">
							<scroll-view style="width: 100%;" class="flex-ten bg-grey padding-sm margin-xs radius bg-white nav" scroll-x
							 scroll-with-animation :scroll-left="scrollLeft">
								<view class="flex">
									<view class="flex-twice align-end" style="margin-top: 90rpx;">
										<!-- #ifdef H5 -->
										<view class="padding-m">数量</view>
										<view class="padding-m">计划</view>
										<view class="padding-m">完成</view>
										<!-- #endif -->
										<!-- #ifndef H5 -->
										<view class="">数量</view>
										<view class="">计划</view>
										<view class="">完成</view>
										<!-- #endif -->
									</view>
									<view class="flex-Nine">
										<view class="cu-item" v-for="(item,index) in 10" :key="index" @tap="tabSelect" :data-id="index">
											<view class="grid text-center col-1" style="align-items:center;width: 180rpx;">
												<view class="bg-cyan2" style="border-radius: 50%;width: 90rpx;height: 90rpx;line-height: 90rpx;" @tap="jumpdetail">辅料</view>
												<view class="padding-m">5200</view>
												<view class="padding-m">2020-04-15</view>
												<view class="padding-m">2020-04-15</view>
												<image class="margin-left-m absolute" style="width: 40rpx;height: 40rpx;" src="https://www.ahlinghui.com/Uploads/image/20190429/images/lujin.png"
												 mode="aspectFit"></image>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</template>
				</tui-collapse>
			</block>
		</view>
		<lime-tips v-if="isFlag" :fixed="true" imgUrl="/static/images/img_noorder@3x.png">咦！暂时没有数据呢……</lime-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import tuiCollapse from "@/colorui/components/tui-collapse/tui-collapse"
	import tuiListCell from "@/colorui/components/list-cell/list-cell"
	export default {
		data() {
			return {
				isFlag: false,
				height: this.screenHeight,
				bdBgColor: 'whitesmoke',
				TabCur: 0,
				scrollLeft: 0,
				dataList: [{
						current: 0,
						disabled: false
					},
					{
						current: -1,
						disabled: false
					},
					{
						current: -1,
						disabled: false
					}
				],
			}
		},
		components: {
			tuiCollapse,
			tuiListCell
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround', 'BackGroundBox'])
		},
		methods: {
			change(e) {
				let index = e.index;
				let item = this.dataList[index];
				item.current = item.current == index ? -1 : index
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			jumpdetail() {
				uni.navigateTo({
					url: './ordertrackingdetail'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 0 120rpx 0;
		box-sizing: border-box;
	}

	.tui-title {
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;
		font-size: 32rpx;
	}

	.tui-content {
		padding: 20rpx 30rpx;
		background: #fff;
		color: #555;
		font-size: 26rpx;
	}
	.grid {
		justify-content: center;
		position: relative;
	}
	.absolute {
		position: absolute;
		top: 13%;
		left: 90%;
	}
	.cu-item {
		padding: 0px;
		height: 100%;
		font-size: 32rpx;
		line-height: 100%;
	}
</style>
